import React,{ Component } from 'react';



export default class Title extends Component<any>{
	static defaultProps = {
		level: 1
	}

	render(){

		let whichSizeTitle;
		switch(this.props.level){
			case 1: whichSizeTitle = (
				<React.Fragment>
					<h1
						style={{display: 'inline-block',marginRight: '10px'}}
					>{this.props.content[0]}</h1>
					<span>{this.props.content[1]}</span>
				</React.Fragment>
			);break;
			case 2: whichSizeTitle = (
				<React.Fragment>
					<h2
						style={{display: 'inline-block',marginRight: '10px'}}
					>{this.props.content[0]}</h2>
					<span>{this.props.content[1]}</span>
				</React.Fragment>
			);break;
			case 3: whichSizeTitle = (
				<React.Fragment>
					<h3
						style={{display: 'inline-block',marginRight: '10px'}}
					>{this.props.content[0]}</h3>
					<span>{this.props.content[1]}</span>
				</React.Fragment>
			);break;
			case 4: whichSizeTitle = (
				<React.Fragment>
					<h4
						style={{display: 'inline-block',marginRight: '10px'}}
					>{this.props.content[0]}</h4>
					<span>{this.props.content[1]}</span>
				</React.Fragment>
			);break;
			case 5: whichSizeTitle = (
				<React.Fragment>
					<h5
						style={{display: 'inline-block',marginRight: '10px'}}
					>{this.props.content[0]}</h5>
					<span>{this.props.content[1]}</span>
				</React.Fragment>
			);break;
		}


		return (
			<div>
				{whichSizeTitle}
			</div>
		)
	}
}
